import styled from "styled-components";
import { Dimension } from "@components/common/types";
import {
  ICON_DIMENSION,
  DEFAULT_ICON_DIMENSION,
  LEFT_MARGIN,
  DEFAULT_LEFT_MARGIN,
  DIMENSION,
  DEFAULT_DIMENSION
} from "../common/SelectTextfieldTextareaConstants";

/**
 * Компонент-контейнер для дочернего элемента пользовательской иконки.
 * @param {InputDimension} dimension - Размер поля ввода.
 */
export const ChildrenContainer = styled.div<{ dimension: Dimension }>`
  position: relative;

  width: ${props => props.dimension ? ICON_DIMENSION[props.dimension].width : DEFAULT_ICON_DIMENSION.width};
  height: ${props => props.dimension ? ICON_DIMENSION[props.dimension].height : DEFAULT_ICON_DIMENSION.height};
  left: ${props => props.dimension ? LEFT_MARGIN[props.dimension] : DEFAULT_LEFT_MARGIN};
  top: ${props => props.dimension
    ?
    (parseFloat(DIMENSION[props.dimension].height) / 2) - (parseFloat(ICON_DIMENSION[props.dimension].height) / 2)
    :
    (parseFloat(DEFAULT_DIMENSION.height) / 2) - (parseFloat(DEFAULT_ICON_DIMENSION.height) / 2)}rem;

  &:hover {
    cursor: pointer;
  }
`;